export default {
  //每次绑定时执行
  bind(el, binding, vnode) {
    // console.log(el);
    //<div class="tab-nav">...</div>

    /**
     * console.log(binding);
     * {
     *   def: {bind: ƒ, update: ƒ},
     *   expression: "{\n    curIdx: tabIndex,\n...},
     *   modifiers: {},
     *   name: "tab-current",
     *   rawName: "v-tab-current",
     *   value: {
     *     className: "nav-item",
     *     curIdx: 0,
     *     currentClassName: "nav-current"
     *   }
     * }
     */
    const _opts = binding.value,
      _childElement = el.getElementsByClassName(_opts.className);

    //绑定时加类 nav-current
    _childElement[_opts.curIdx].className += ` ${_opts.currentClassName}`;
  },
  //每次视图更新时执行
  update(el, binding, vnode) {
    // console.log(el);

    // 可以通过binding拿到上一次配置的value
    /**
     * console.log(binding);
     * {
     *   def: {bind: ƒ, update: ƒ},
     *   expression: "{\n    curIdx: tabIndex,\n...},
     *   modifiers: {},
     *   name: "tab-current",
     *   oldArg: undefined,
     *   oldValue: {
     *     className: "nav-item",
     *     curIdx: 0,
     *     currentClassName: "nav-current"
     *   }
     *   rawName: "v-tab-current",
     *   value: {
     *     className: "nav-item",
     *     curIdx: 1,
     *     currentClassName: "nav-current"
     *   }
     * }
     */

    const _opts = binding.value,
      _oldOpts = binding.oldValue,
      _childElement = el.getElementsByClassName(_opts.className);

    //重置类名
    _childElement[_oldOpts.curIdx].className = `${_oldOpts.className}`;
    //给当前点选的项添加类名
    _childElement[_opts.curIdx].className += ` ${_opts.currentClassName}`;

  }
}